<template >
    <!--<el-button @click="login" type="primary">点击登录</el-button>
    <el-button @click="feedback" type="primary">点击反馈</el-button>
    <RouterLink to="/feedback">链接反馈</RouterLink>-->
    <div class="login-container">
      <div class="login-wrapper">
    <div class="image-wrapper">
      <img src="@/assets/login-image.png" alt="登录背景图" class="login-image" />
    </div>
    <!-- 左侧表单 -->
    <div class="form-wrapper">
      <form @submit.prevent="handleLogin" class="login-form">
        <h2 >登录</h2>
        <div class="form-group">
          <label for="username">用户名:</label>
          <input
            type="text"
            id="username"
            v-model.trim="credentials.username"
            placeholder="请输入用户名"
            required
          />
        </div>
        <div class="form-group">
          <label for="password">密码:</label>
          <input
            type="password"
            id="password"
            v-model.trim="credentials.password"
            placeholder="请输入密码"
            required
          />
        </div>

        <div class="form-group">
          <label class="checkbox-label">
            <input type="checkbox" v-model="agreedToTerms" />
            我同意 <a href="#">用户协议</a> 和 <a href="#">隐私政策</a>
          </label>
        </div>

        <button @click="login" type="submit" class="login-button" :disabled="!canSubmit">
          登录
        </button>

        <p v-if="error" class="error-message">{{ error }}</p>
      </form>
    </div>
  </div>
    </div>
   
</template>

<script setup>
import { ref, computed } from 'vue'
import {useUserStore} from '@/stores/modules/user'
import { useRouter } from 'vue-router'
let userStore=useUserStore()
let router=useRouter()
function login(){
    userStore.setUser({username:"test",password:"123456",token:""})
    router.push({path:'/'})
}
function feedback(){
    router.push({path:'/feedback'})
}

// 登录凭证
const credentials = ref({
  username: '',
  password: ''
})

// 用户协议是否已勾选
const agreedToTerms = ref(false)

// 错误信息
const error = ref('')

// 路由实例


// 是否允许提交（用户名、密码、勾选协议都满足）
const canSubmit = computed(() => {
  return (
    credentials.value.username.trim() !== '' &&
    credentials.value.password.trim() !== '' &&
    agreedToTerms.value
  )
})

// 模拟登录函数
const handleLogin = () => {
  if (!canSubmit.value) {
    error.value = '请同意用户协议和隐私政策以继续登录。'
    return
  }
  // 实际开发中应调用 API 验证用户名/密码
  if (credentials.value.username === 'admin' && credentials.value.password === '123456') {
    router.push('/')
  } else {
    error.value = '用户名或密码错误'
  }
}
</script>
<style scoped>
.login-container {   
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;      /* 垂直居中 */
  height: 100vh;        /* 占满整个视口高度 */
  padding: 2rem;
  background-color: #f9f9f9;
}

.image-wrapper {
  flex: 0 0 35%; /* 固定宽度为父容器的 35% */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fafafa;
}

.form-wrapper {
  flex: 0 0 65%; /* 固定宽度为父容器的 65% */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9f9f9;
}

.login-wrapper {
  margin: auto;
  display: flex;
  width: 800px; /* 控制总宽度 */
  max-width: 90vw; /* 移动端适配 */
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.login-image {
  max-width: 100%; /* 不超过父容器宽度 */
  height: auto;    /* 保持宽高比 */
  object-fit: contain; /* 适应容器大小 */
}

/* 表单样式保持不变 */
.login-form {
  background-color: #fff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 600px;
  height: 100%;
}

.form-group {
  margin-bottom: 1rem;
}
.form-group>input{
  width: 95% !important;
}
label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
h2{
    text-align: center;
}
input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: normal;
}

.checkbox-label input {
  margin: 0;
}

.login-button {
  width: 100%;
  padding: 0.75rem;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.login-button:hover {
  background-color: #369c6b;
}

.login-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.error-message {
  color: red;
  margin-top: 1rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-container {
    flex-direction: column;
  }
  .image-wrapper {
    height: auto;
    padding: 2rem 0;
  }
}
</style>